<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router"

const router = useRouter()
const keyword = ref("")
const go_search = () => router.push({ name: "search", params: { keyword: keyword.value } })

</script>

<template>
    <header>
        <section class="top-tip">
            <!-- 第一行，登录注册  http://sph-order.atguigu.cn/myOrder.html-->
            <div class="login">
                <span>尚品汇欢迎您！&nbsp;</span>
                <a href="javascript:;" class="login-btn" title="请登录">请登录</a>
                <a href="javascript:;">免费注册</a>
            </div>
            <div class="menu-list">
                <!-- 空连接的说明 https://blog.csdn.net/micr_cai/article/details/124597435 -->
                <a class="no-border" href="javascript:;">我的订单</a>
                <a href="javascript:;">我的购物车</a>
                <a href="javascript:;">我的尚品汇</a>
                <a href="javascript:;">企业采购</a>
                <a href="javascript:;">关注尚品汇</a>
                <a href="javascript:;">观众尚品汇</a>
                <a href="javascript:;">商家后台</a>
            </div>
        </section>
        <section class="search">
            <!-- 第二行，搜索框图标等 -->
            <div class="logo">
                <img src="./images/logo.png" alt="logo">
            </div>
            <div class="search-input">
                <input v-model="keyword" type="text">
                <button @click="go_search">搜索</button>
            </div>
        </section>
    </header>
</template>

<style scoped lang="less">
@import "@/styles/mixins.less";
@import "@/styles/common.less";
@import "@/styles/extends.less";

@right: right;
@link-padding: 8px; // 控制第一行灰色背景总竖线的间隔
@input-height: 32px; // 搜索框的整体高度

.top-tip {
    .flex-row-between(true);
    height: 30px;
    font-size: @min-font-size;
    color: @font-gray;
    padding: 0 50px;
    background-color: @bg-color-gray;

    .login {
        .login-btn:extend(.overflow-ellipsis) {
            // 登录后展示账号名称，溢出显示省略号
            max-width: 100px;
        }

        a {
            padding: 0 @link-padding;

            &:hover {
                text-decoration: underline;
            }

            &:nth-child(2) {
                .border-1px-switch(@right; @border-gray);
            }
        }
    }

    .menu-list {
        a {
            padding: 0 @link-padding;

            &:hover {
                text-decoration: underline;
            }

            &:not(.no-border) {
                .border-1px-switch(left, @border-gray);
            }
        }
    }
}

.search {
    .flex-row-between(true);
    height: 100px;
    padding: 0 100px;

    .logo {
        display: block;
        width: 175px;
    }

    .search-input {
        .flex-row-between(false);

        input {
            width: 450px;
            height: @input-height;
            border: 2px solid @border-input;
            box-sizing: border-box;
            padding: 0px 10px;
        }

        button {
            width: 68px;
            background-color: @border-input;
            font-size: @min-font-size;
            height: @input-height;
            box-sizing: border-box;
            color: @font-white;
            cursor: pointer;
        }
    }
}
</style>
